@mainColor: #fb7299;
@ratio: 3.75;


// ============== 公用样式  ==================
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
}

body {
  font-family: Helvetica Neue,Tahoma,Arial,PingFangSC-Regular,Hiragino Sans GB,Microsoft Yahei,sans-serif;
}

a {
  color: #333;
  text-decoration: none;
}

img {
  vertical-align: middle;
  width: 100%;
  height: 100%;
}
ul {
  list-style: none;
}

.ellipsis-2 {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

// =============== 布局样式  ================
// 约定 iphone6 375px 为基准设备   1vw = 3.75px

.b-header {
  width: 100%;
  height: (84vw / @ratio);
  position: fixed;
  left: 0;
  top: 0;
  background: #fff;
  z-index: 999;
}

.navbar {
  width: 100%;
  height: (44vw / @ratio);
  padding: 0 (12vw / @ratio) 0 (18vw / @ratio);
  display: flex;
  align-items: center;
  .left {
    .Navbar_logo {
      font-size: (28vw / @ratio);
      color: @mainColor;
    }
  }
  .right {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    a {
      margin-left: (24vw / @ratio);
    }
    .ic_search_tab {
      font-size: (22vw / @ratio);
      color: #ccc;
    }
    .login {
      width: (24vw / @ratio);
      height: (24vw / @ratio);
    }
    .download {
      width: (72vw / @ratio);
      height: (24vw / @ratio);
    }
  }
}

.menu {
  height: (40vw / @ratio);
  width: 100%;
  border-bottom: 0.2px solid #eee;
  padding-right: (40vw / @ratio);
  position: relative;
  .tab {
    overflow: hidden;
    width: 100%;
    position: relative;
    top: 1px;
    ul {
      width: 200%;
      li {
        padding: 0 (16vw / @ratio);
        display: inline-block;
        a {
          display: block;
          font-size: (14vw / @ratio);
          line-height: (38vw / @ratio);
          height: (38vw / @ratio);
          border-bottom: (2vw / @ratio) solid transparent;
        }
        &.active {
          a {
            border-bottom-color: @mainColor;
            color: @mainColor;
          }
        }
      }
    }
  }
  .down {
    position: absolute;
    right: 0;
    top: 0;
    width: (40vw / @ratio);
    height: (40vw / @ratio);
    text-align: center;
    line-height: (40vw / @ratio);
    color: #ccc;
    i {
      font-size:(20vw / @ratio);
    }
  }
}

.b-main {
  padding: (84vw / @ratio) (5vw / @ratio) 0 (5vw / @ratio);
}

.video {
  &-list {
    display: flex;
    flex-wrap: wrap;
  }
  &-item {
    width: 50%;
    padding: (8vw / @ratio) (5vw / @ratio);
    font-size: (12vw / @ratio);
    .card {
      position: relative;
      img {
        height: auto;
      }
      .count {
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        padding: (8vw / @ratio);
        display: flex;
        justify-content: space-between;
        color: #fff;
        background: linear-gradient(to top, rgba(0,0,0,0.6),rgba(0,0,0,0));
        i {
          position: relative;
          top: (2vw / @ratio);
        }
      }
    }
    .title {
      margin-top: (6vw / @ratio);
    }
  }
}

.open-btn {
  position: fixed;
  left: 0;
  bottom: (30vw / @ratio);
  padding: 0 (12vw / @ratio);
  width: 100%;
  a {
    display: block;
    width: 100%;
    height: (36vw / @ratio);
    line-height: (36vw / @ratio);
    text-align: center;
    background: @mainColor;
    color: #fff;
    border-radius: (18vw / @ratio);
    box-shadow: 0 0 (12vw / @ratio) rgba(0,0,0,0.2);
    span {
      font-size: (14vw / @ratio);
    }
  }
} 